<template>
    <div class="home">
        <!-- 将当前组件(页面)中的NavBar 传递到 .app-header -->
        <!-- <teleport to='.app-header'>
            <van-nav-bar title="主页" left-text="xxx" right-text="按钮"></van-nav-bar>
        </teleport> -->

        <!-- <AppHeader to=".app-header" title="测试" left-arrow left-text="1111" right-text="22222" back>
            父组件给 AppHeader传递的内容
            <template #left>1111</template>
            <template #title>2222</template>
            <template #right>3333</template>
        </AppHeader> -->


        <AppHeader to=".app-header" class="HomeNav" title="测试" left-arrow left-text="1111" right-text="22222" >
            <template #left>
                <van-icon
                    name="" />
            </template>
            <template #title>
                <van-search label="1111" v-model="keywords" clearable placeholder="关键词" shape="round" @focus="$router.push('/search')">
                    <template #label>
                        <van-icon
                            name=""></van-icon>
                    </template>
                </van-search>
            </template>
            <template #right>
                <router-link to="/login">登录</router-link>
            </template>
        </AppHeader>


       

        <van-pull-refresh v-model="isRefresh" @refresh="refreshHandler">

            <div class="banner-wrapper">
            <van-swipe class="swiper" :autoplay="3000" lazy-render>
                <van-swipe-item v-for="item in list" :key="item.bannerid">
                    <img class="img" :src="item.img" />
                </van-swipe-item>
            </van-swipe>
        </div>

        <van-grid :column-num="5">
            <van-grid-item class="grid-menu" v-for="value in 10" :key="value" icon="photo-o" text="老王超市">
                <van-image class="img"
                    src="https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png" />
            </van-grid-item>
        </van-grid>




            <!-- 
            List 组件通过 loading 和 finished 两个变量控制加载状态，当组件滚动到底部时，会触发 load 事件并将 loading 设置成 true。此时可以发起异步操作并更新数据，数据更新完毕后，将 loading 设置成 false 即可。若数据已全部加载完毕，则直接将 finished 设置成 true 即可

         -->
            <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="loadHandler">
                <van-row class="pro-list" :gutter="20">
                    <van-col v-for="item in proList" :key="item.proid" class="pro-item" :span="12">
                        <van-image class="pro-img" :src="item.img1"></van-image>

                        <div class="pro-name van-multi-ellipsis--l2">
                            {{ item.proname }}
                        </div>
                        <div class="pro-price">
                            {{ (item.originprice * item.discount / 10).toFixed(2) }}
                        </div>
                    </van-col>
                </van-row>
            </van-list>
        </van-pull-refresh>

    </div>
</template>

<script setup lang="ts">
import type { pageParams } from "@/api/pro";
import type { BannerItem } from "@/api/banner";
import type { ProNS } from "@/@types/pro";

import { ref, reactive, onMounted } from "vue";
import { getRecommendListAPI } from "@/api/pro";
import { getBannerListAPI } from "@/api/banner";
import AppHeader from "@/components/AppHeader/index.vue";

const keywords = ref<string>("");
const list = ref<BannerItem[]>([]);

const pageInfo = reactive<pageParams>({
    count: 1,
    limitNum: 10,
})

const loading = ref<boolean>(false);
const finished = ref<boolean>(false);
const isRefresh = ref<boolean>(false);
const proList = ref<ProNS.ProItem>([])


console.log(1111, AppHeader);

const getBannerList = async (): Promise<any> => {
    try {
        let res = await getBannerListAPI();
        console.log("res", res);
        list.value = res.data;
    } catch (err) {
        console.log(err);
    }
}
const getRecommendList = async (): Promise<any> => {
    try {
        let res = await getRecommendListAPI(pageInfo);
        console.log("推荐列表:" + pageInfo, res);
        proList.value.push(...res.data);
    } catch (err) {
        console.log(err);
    }
}

const loadHandler = async (): Promise<any> => {
    console.log("准备加载", loading.value);

    await getRecommendList()
    loading.value = false;

    if (pageInfo.count > 15) {  // 总共15页 => 大于15就结束
        finished.value = true;
    } else {
        pageInfo.count++; // 下次滑到底部 加载下一页
    }
}

const refreshHandler = async (): Promise<any> => {
    console.log("下拉刷新", isRefresh.value);
    // 
    pageInfo.count = Math.round(Math.random() * 4) + 1;  // 随机1-4
    proList.value = [];
    await getRecommendList()
    isRefresh.value = false;
}



onMounted(() => {
    getBannerList();
})


</script>

<!-- scoped  只对当前组件生效 -> AppHeader -> tp 到  .app-header元素上去了  -> 当前style添加的样式对其不生效 
    怎么解决?
-->
<style lang="scss" scoped>
.HomeNav {
    background-color: #c82519;
}

.banner-wrapper {
    width: 7rem;
    height: 3.5rem;
    margin: 0.1rem auto;
    overflow: hidden;
    border-radius: 4px;
}

.banner-wrapper .img {
    width: 100%;
}

.box {
    width: 100px;
    height: 100px;
}

// 解析式 有scope => .grid-menu .img[data-v-a763a6ae]
.grid-menu .img {
    width: 80%;
}


// 想在当前页面中 修改某个组件内元素的样式 
// 下方写方法不行 => 在解析时会默认添加 当前组件(scoped) id => [data-v-a763a6ae] 
// .grid-menu .img .van-image__img[data-v-a763a6ae] 

// 深度选择器 => 可以当前页面中 修改某个组件内元素的样式  
// 原理: 将属性放在所有选择器之前 [data-v-a763a6ae]  .grid-menu .img .van-image__img {}  => 只要父元素中有此属性即可

// Vue2  (vue3也可以)
// ::v-deep .grid-menu .img .van-image__img{
//     width: 80%;
// }

// Vue3 (写法)
:deep(.grid-menu .img .van-image__img) {
    width: 80%;
}


.pro-list {
    padding: 0 0.2rem;

    .pro-item {


        .pro-img {
            // width: 80%;
            display: block;
            margin: 0.2rem auto;
        }

        .pro-name {
            line-height: 0.32rem;
        }

        .pro-price {
            line-height: 0.32rem;
        }

    }
}
</style>